<template>
<div>
    <q-drawer v-model="isMsgDrwer" overlay side="right" style="z-index: 1" :width="320" :breakpoint="200" class="no-scroll" content-class="bg-grey-10 ">
        <q-scroll-area style="
          height: calc(100% - 230px);
          margin-top: 60px;
          margin-bottom: 100px;
        ">
            <q-card v-for="(item, index) in applyList[1]" :key="index" class="bg-grey-9 q-mx-md q-mb-sm">
                <q-card-section class="text-white q-py-sm">
                    <div>
                        {{ item.pa_title }}
                    </div>
                </q-card-section>
                <q-separator color="grey-7" inset />
                <q-card-section class="q-py-sm">
                    <div class="text-grey-5 text-caption">
                        {{ item.pa_description }}
                    </div>
                    <div class="q-mt-md row justify-end text-grey-4">
                        <q-btn outline @click="handleApply(item)">处理</q-btn>
                        <q-btn class="q-ml-sm" @click="handleDeleteApplys(item)" outline>删除</q-btn>
                    </div>
                </q-card-section>
            </q-card>
            <q-card v-for="(item, index) in applyList[2]" :key="index" class="bg-grey-9 q-mx-md q-mb-sm">
                <q-card-section class="text-white q-py-sm">
                    <div>
                        {{ item.pa_title }}
                    </div>
                </q-card-section>
                <q-separator color="grey-7" inset />
                <q-card-section class="q-py-sm">
                    <div class="text-grey-5 text-caption">
                        {{ item.pa_description }}
                    </div>
                    <div class="q-mt-md row justify-end text-grey-4">
                        <q-badge outline class="text-grey-7">已处理</q-badge>
                        <q-btn class="q-ml-sm" @click="handleDeleteApplys(item)" outline>删除</q-btn>
                    </div>
                </q-card-section>
            </q-card>
        </q-scroll-area>
        <q-card class="transparent q-pa-none absolute-top" flat square>
            <q-toolbar class="bg-grey-9 text-white">
                <span class="text-h6 row items-start">
                    项目消息<q-badge v-if="applyList[1].length > 0" color="red" class="q-ml-sm">{{ applyList[1].length }}</q-badge>
                </span>

                <q-space></q-space>

                <q-btn flat round dense @click="handleMsgDrawer">
                    <q-icon name="close" />
                </q-btn>
            </q-toolbar>
        </q-card>
        <q-card v-if="applyList[0].length>0" class="transparent q-px-md q-py-sm absolute-bottom" style="height: 100px" flat square>
            <q-separator color="grey-5"></q-separator>
            <!-- <div class="text-white text-subtitle1 q-py-sm">企业内外成员默认加入可查看 <span v-if="user.right>=3" class="text-caption text-teal-4">设置权限</span></div> -->
            <div class="row text-grey-4 q-py-sm justify-end">
                <!-- <q-btn color="grey-4" class="col-grow" outline icon="mdi-read">全部已读</q-btn> -->
                <q-btn class="q-ml-sm" outline icon="delete">全部删除</q-btn>
            </div>
        </q-card>
    </q-drawer>
    <q-dialog v-model="isMsgDrwerDialog" :position="$q.platform.is.mobile ? 'bottom' : 'standard'">
        <q-card style="width: 50%" class="back-dark">
            <q-card-section class="column items-start">
                <div class="row full-width justify-between">
                    <div class="column items-start">
                        <div class="text-h5">项目加入申请</div>
                        <div class="text-subtitle1">
                            企业内外成员默认加入可查看
                            <span v-if="user.right >= 3" class="text-primary">修改权限</span>
                        </div>
                    </div>
                    <q-btn flat icon="close" @click="handleCloseMsgDialog"> </q-btn>
                </div>

                <q-separator color="grey"></q-separator>
            </q-card-section>
            <q-card-section class="q-pb-xl q-gutter-sm">
                <q-select v-model="status" dark :options="options" label="选择" />
                <div class="row justify-end q-mt-md">
                    <q-btn @click="handleUpdateApply" outline class="text-grey-4">
                        确认
                    </q-btn>
                </div>
            </q-card-section>
        </q-card>
    </q-dialog>
</div>
</template>

<script>
import {
    checkMember,
    loadApplys,
    updateApplyInfo,
    deleteApply,
} from "assets/api/member";
export default {
    name: "MsgDrawer",
    props: {
        isMsgDrwer: {
            default: false,
        },
        pid: {
            type: String
        },
        user: {
            type: Object
        },
        applyList: {
            type: Array,
        }
    },
    data() {
        return {
            isMsgDrwerDialog: false,
            isApplyInfoLoad: false,
            permission: 1,
            status: {
                label: "同意加入",
                value: 2,
            },
            check_reason: "",
            options: [{
                    label: "同意加入",
                    value: 2,
                },
                {
                    label: "拒绝加入",
                    value: 3,
                },
            ],
            paid: "",
        };
    },
    mounted() {

    },
    methods: {
        handleCloseMsgDialog() {
            this.isMsgDrwerDialog = false;
        },
        handleMsgDrawer() {
            this.$emit("close");
        },

        handleApply(item) {
            this.paid = item.paid;
            this.isMsgDrwerDialog = true;
        },
        triggerReload() {
            this.$emit("update", 'apply')
        },

        handleUpdateApply() {
            if (this.status.value) {
                this.$q.loading.show({
                    customClass: "mypage-loading",
                    message: '<span class="text-white text-weight-bold">正在处理...</span>',
                });
                updateApplyInfo({
                    paid: this.paid,
                    status: this.status.value,
                    permission: this.permission,
                    check_reason: this.check_reason,
                }).then((res) => {
                    this.$q.loading.hide();
                    if (res.data.code == 1) {
                        this.handleCloseMsgDialog();
                        this.triggerReload();
                        this.$message.success()
                    } else {
                        this.$message.error()
                    }
                });
            }
        },
        reqDeleteApply(item) {
            this.$q.loading.show({
                customClass: "mypage-loading",
                message: '<span class="text-white text-weight-bold">正在处理...</span>',
            });
            deleteApply({
                isApplyer: item.Applyer,
                paid: item.paid,
                apply_id: item.apply_id
            }).then(res => {
                this.$q.loading.hide();
                if (res.data.code == 1) {
                    this.handleCloseMsgDialog();
                    this.triggerReload();
                    this.$message.success();
                } else {
                    this.$q.notify({
                        color: "red-5",
                        textColor: "white",
                        icon: "warning",
                        position: "top",
                        timeout: "1500",
                        message: "处理失败！",
                    });
                }
            })
        },
        handleDeleteApplys(item) {
            console.log(item);
            if (item.apply_eid == this.user.eid || item.apply_openid == this.user.openid) {
                item.isApplyer = true
            } else {
                item.isApplyer = false;
            }
            if (item.status > 1) {
                this.reqDeleteApply(item);
            } else {
                this.$q
                    .dialog({
                        title: "提示",
                        message: "确认删除该条申请？",
                        cancel: true,
                        persistent: true,
                    })
                    .onOk(() => {
                        this.reqDeleteApply(item)

                    })
                    .onCancel(() => {})
                    .onDismiss(() => {
                        // console.log('I am triggered on both OK and Cancel')
                    });
            }

        }
    },
};
</script>
